<template>
	<view style="background-color: #70552d;color: #f3eacd;height: 100vh;position: relative;">
		<!-- 顶部安全距离 -->
		<view :style="{height: sConf.tH+'px'}"></view>
		<scroll-view scroll-y="true" style="padding: 10px; height: 100vh;">
			<tn-swipe-action @open="eventActionShow" @select="eventActionCurrent">
				<tn-swipe-action-item v-for="(item, index) in myBankArray" :key="index" :options="options">
					<view style="padding: 10px;border-radius: 10px;display: flex;gap: 10px;color: #111;">
						<image :src="sConf.pics + '/media/banks/' + filterBankLogo(item.bank) + '.png'" mode=""
							style="width: 64px;height: 64px;border-radius: 5px;"></image>
						<view class="" style="display: flex;flex-direction: column;justify-content: space-around;">
							<text style="font-weight: bold;">{{item.bank}}</text>
							<text>{{item.card}}</text>
							<text>{{item.store}}</text>
						</view>
					</view>
				</tn-swipe-action-item>
			</tn-swipe-action>

			<!-- 底部安全距离 -->
			<view class="" style="height: 64px;"></view>
		</scroll-view>
		<view style="padding: 15px; position: absolute;left: 0;bottom: 0;width: 100vw;">
			<button class="gl-button-base" hover-class="gl-button-base-hover"
				style="display: flex;align-items: center;gap: 5px;justify-content: center;"
				@click="()=>{this.showPopup=true}">
				<tn-icon name="bankcard" color="#fff" size="32"></tn-icon>
				<text style="font-size: small;">添加银行卡</text></button>
		</view>
		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#70552d" text-color="#f3eacd"> {{title}}</tn-navbar>

		<!-- popup模态窗口 -->
		<tn-popup v-model="showPopup" open-direction="bottom">
			<view class="" style="background-color: #fff;color: #111;padding: 10px;">
				<view style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 15px;">
					<text style="font-weight: bold;">绑定银行卡</text>
					<tn-icon name="close-square" size="64" color="#dd524d" @click="popClose"></tn-icon>
				</view>
				<tn-form :model="curData" label-position="top">
					<tn-form-item label="户名" prop="name">
						<tn-input custom-class="gl-base-input" v-model="curData.name" type="text"></tn-input>
					</tn-form-item>
					<tn-form-item label="卡号" prop="card">
						<tn-input custom-class="gl-base-input" v-model="curData.card" type="number"></tn-input>
					</tn-form-item>
					<tn-form-item label="开户银行" prop="bank">
						<tn-input custom-class="gl-base-input" v-model="curData.bank" type="select"
							@click="()=>{this.showBankPicker=true}"></tn-input>
						<tn-picker v-model="curData.bank" v-model:open="showBankPicker" :data="allBanks"></tn-picker>
					</tn-form-item>
					<tn-form-item label="开户网点" prop="store">
						<tn-input custom-class="gl-base-input" v-model="curData.store" type="text"></tn-input>
					</tn-form-item>
				</tn-form>
				<view style="padding: 15px;">
					<tn-checkbox v-model="agent">我已确认以上信息准确无误，愿意承担因信息错误导致的相关后果。</tn-checkbox>
				</view>
				<view style="padding: 15px;">
					<button class="gl-button-base" hover-class="gl-button-base-hover" :disabled="!agent"
						@click="submitForm"> 提交 </button>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import bank from '../js_sdk/lib/bank.js';
	export default {
		data() {
			return {
				title: '银行卡',
				sConf: getApp().globalData,
				showPopup: false,
				showBankPicker: false,
				agent: false,
				myBankArray: [],
				allBanks: [],
				options: [{
						text: '编辑',
						icon: 'edit',
						bgColor: 'tn-orange'
					},
					{
						text: '解绑',
						icon: 'delete',
						bgColor: 'tn-red'
					},
				],
				curData: {
					id: null,
					name: null,
					card: null,
					bank: null,
					store: null
				}
			}
		},
		onLoad() {
			console.log(this.sConf.auth);
			this.loadDefData()
			this.allBanks = Object.values(bank)
		},
		onReady() {

		},
		methods: {
			popClose() {
				this.showPopup = false
				this.agent = false
				this.curData = {
					id: null,
					name: null,
					card: null,
					bank: null,
					store: null
				}

			},
			filterBankLogo(e) {
				for (let key in bank) {
					if (bank[key] === e) {
						return key
					}
				}
				return null
			},
			eventActionShow(e) {
				console.log('eventActionShow', e);
			},
			eventActionCurrent(e, c) {
				console.log('eventActionCurrent', e, c);
				if (c === 0) {
					this.curData = this.myBankArray[e]
					this.showPopup = true
				}
				if (c === 1) {
					let that = this
					let idx = this.myBankArray[e].id
					uni.showModal({
						title: '确认',
						content: '是否要解绑银行卡',
						success(r) {
							if (r.confirm) {
								that.loadDelData(idx)
							}
						}
					})
				}
			},
			loadDefData() {
				let host = this.sConf.host + '/weapps/myBank/'
				let token = this.sConf.token
				let data = {
					sid: this.sConf.auth.id
				}
				psMethod.authenticatorGetSync(host, token, data).then(res => {
					console.log('加载银行卡', res);
					this.myBankArray = res.resmsg
				})
			},
			loadDelData(e) {
				let host = this.sConf.host + '/weapps/myBank/' + e + '/'
				let token = this.sConf.token
				psMethod.authenticatorDeleteSync(host, token).then(res => {
					console.log('解绑银行卡', res);
					this.loadDefData()
				})

			},
			submitForm() {
				if (!this.sConf.auth.auth) {
					uni.showModal({
						title: '实名认证',
						content: '加载用户实名认证信息失败，请先完成个人实名认证.',
						success(r) {
							if (r.confirm) {
								uni.navigateTo({
									url: '/pagec/idcard/idcard'
								})
							}
						}
					})
					return
				}
				if (!this.curData.name || !this.curData.card) {
					uni.showToast({
						icon: 'error',
						title: '验证户名或卡号失败'
					})
					return
				}
				if (!this.curData.bank || !this.curData.store) {
					uni.showToast({
						icon: 'error',
						title: '验证开户行失败'
					})
					return
				}
				if (this.curData.name !== this.sConf.auth.basename) {
					uni.showToast({
						icon: 'error',
						title: '只能添加自己的银行卡'
					})
					return
				}

				if (this.curData.id === null) {
					let host = this.sConf.host + '/weapps/myBank/'
					let token = this.sConf.token
					let data = this.curData
					data.sid = this.sConf.auth.id
					psMethod.authenticatorPostSync(host, token, data).then(res => {
						console.log('绑定银行卡', res);
						uni.showToast({
							title: '提交成功'
						})
						this.popClose()
						this.loadDefData()
					})
				} else {
					let host = this.sConf.host + '/weapps/myBank/' + this.curData.id + '/'
					let token = this.sConf.token
					let data = this.curData
					data.sid = this.sConf.auth.id
					psMethod.authenticatorPatchSync(host, token, data).then(res => {
						console.log('修改银行卡', res);
						uni.showToast({
							title: '提交成功'
						})
						this.popClose()
						this.loadDefData()
					})
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>